<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表排序</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <div id ="root">
        <input type="text" v-model:value="keyword" placeholder="请输入搜索关键字"></input>
        <button v-on:click="sortType = 2">按照年龄升序</button>
        <button v-on:click="sortType = 1">按照年龄降序</button>
        <button v-on:click="sortType = 0">按自然序</button>
        <ul>
            <li v-for="item in compPesons">
                {{item.name}} - {{item.age}} - {{item.sex}}
            </li>
        </ul>
     </div>

     <script type="text/javascript">
        new Vue({
            el: "#root",
            data:function(){
                return {
                    persons:[{id: "001", name:'周冬雨', age:20, sex:'女'},
                    {id: "002", name:'马冬梅', age:19, sex:'女'},
                    {id: "003", name:'周杰伦', age:21, sex:'男'},
                    {id: "004", name:'温兆伦', age:22, sex: '男'}],
                    keyword:"",
                    sortType: 0
                    //filterPersons:[]
                }
            },
            computed:{
                compPesons:{
                    get(){
                        //计算结果通过一个return返回
                        const arr = this.persons.filter(item => item.name.indexOf(this.keyword) !== -1)
                        //if(this.sortType == 0){ return arr}
                        if(!this.sortType){ return arr}
                        return arr.sort((item1,item2) =>
                            this.sortType === 1 ? item2.age-item1.age : item1.age-item2.age 
                        )
                    }
                }
            },
            methods:{

            }
        })
     </script>
</body>
</html>